<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
        <meta http-equiv="content-type" content="text/html; charset={+IO.encoding+}" />
		<meta name="generator" content="BioJS Library" name="author" value="John Gomez Carvajal <johncar@gmail.com>" />
		
        <title>BioJs: JavaScript components for biological data < EMBL-EBI</title>
        
        <meta content="width=device-width,initial-scale=1" name="viewport" />
            
        <!-- EBI's style sheets -->
        <link href="style/normalize.css" rel="stylesheet" />
        <link href="style/boilerplate-style.css" rel="stylesheet" />
        <link href="style/ebi-custom.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="style/984-24-col-fixed.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="style/ebi-positioning.css" media="screen" rel="stylesheet" type="text/css" />
        <link href="style/biojs.css" rel="stylesheet" type="text/css" />
        <link href="style/biojs-colours_blue.css" rel="stylesheet" type="text/css" />
        
        <!-- jQuery Library -->
        <script language="JavaScript" type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
        <script language="JavaScript" type="text/javascript" src="scripts/jquery-ui-1.8.2.custom.min.js"></script>
		
	</head>

	<body class="level2" id="biojs" >
    
        <div id="skip-to">
            <ul>
                <li><a href="#content" title="">Skip to main content</a></li>
                <li><a href="#local-nav" title="">Skip to local navigation</a></li>
                <li><a href="#global-nav" title="">Skip to EBI global navigation menu</a></li>
                <li><a href="#global-nav-expanded" title="">Skip to expanded EBI global navigation menu (includes all sub-sections)</a></li>
            </ul>
        </div>
        
        
        <div class="container_24" id="wrapper">
        
            <!-- ============================== header ================================= -->
        
            <header>
                <div class="masthead grid_24" id="global-masthead">
                    <p class="logo-img"><a class="active" href="/" id="logo" style="border:none;" title="Return to the European Bioinformatics Institute home page"><img alt="European Bioinformatics Institute" src="images/logoebi.png" typeof="foaf:Image" /></a></p>
                    <nav>
                        <ul id="global-nav">
                            <li class="first active" id="services"><a href="/services" title="">Services</a></li>
                            <li id="research"><a href="/research" title="">Research</a></li>
                            <li id="training"><a href="/training" title="">Training</a></li>
                            <li id="industry"><a href="/industry" title="">Industry</a></li>
                            <li class="last" id="about"><a href="/about-us" title="">About us</a></li>
                        </ul>
                    </nav>
                </div>
                
                <div class="masthead grid_24" id="local-masthead">
                    <div class="grid_12 alpha" id="local-title-logo">
                        <h1>BioJs | Home</h1>
                        <p><a href="." style="border-bottom-width: 0px;" title=""><img alt="Biojs" class="logo" src="images/logo.png" /></a></p>
                    </div>
                    
                    <!--
                    
                    <div class="grid_12 omega">
                        <form action="search" id="local-search">
                            <fieldset>
                                <div class="form">
                                    <label>
                                        <input class="field" id="local-searchbox" name="q" onblur="displaySearchInterPro(this);" onfocus="hideSearchInterPro(this);" size="30" type="text" value="" />
                                    </label>
                                    <input alt="Search InterPro" class="submit" id="searchsubmit" title="Search InterPro" type="submit" value="Search" />
                                    
                                    
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    
                     -->
                    
                    <nav>
                        <ul class="grid_24" id="local-nav">
                            <li class="first"><a href="./index.html" title="">Home</a></li>
                            <li><a href="./components.html" title="">Components</a></li>
                            <li><a href="./download.html" title="">Download</a></li>
                            <li class="last"><a href="./about.html" title="">About BioJs</a></li>
                        </ul>
                    </nav>
                </div>
            </header>

<!-- ============================== site content ============================ -->	
	
            <div class="clearfix" id="content" role="main">

                <!-- ============================== main section ============================ -->
                    
                <div class="grid_24"> <!-- grid_24 -->
                    <div class="main">

						<h2>Overview</h2>
                        <p>BioJS is an open source JavaScript library of graphical components to represent biological information. 
                        	It offers a standard architecture, which facilitates developers to use its components and/or develop them. 
                        	It also provides a registry service acting as a repository for testing and discovering components. 
                        	BioJS as project encourages developing graphical components that can be easily reused and shared by 
                        	the bioinformatics community.</p>
                        
                        <h3>Develop</h3>
                        <p>BioJS defines few rules and guidelines to aid development of components following best practices in 
                        	software engineering. Knowing how to use one BioJS component makes very intuitive how to use or develop 
                        	other components. Any BioJS component by default includes auto-generated documentation from commented 
                        	source code,common events working in different JavaScript frameworks, functional examples, a graphical 
                        	interface for testing purposes and an easy auto-registration in the BioJS registry.</p>
                        
                        <h3>Combine</h3>
                        <p>Different libraries are available to represent biological information on the web. However there is 
                        	not a central registry providing information like where to find them and what functionality they offer. 
                        	BioJS does not aim to be a generic registry of JavaScript libraries, but a registry of graphical BioJS 
                        	compliant components. Still other libraries can be registered in BioJS by creating a simple wrapper 
                        	that makes it complain with the standard architecture of BioJS.</p>
                        
                        <h3>Use</h3>	
                        <p>Reusing pieces of software is a common practice in Software Engineering. There is not need to develop 
                        	specific functionality if it is already implemented. By extending original functionality is possible 
                        	to change it to specific needs. This strategy provides a standard and scalable way to make custom 
                        	applications saving time in the development process. It also facilitates the integration of components 
                        	to enhance or build more complex web applications. This concept is widely applied in Bioinformatics, 
                        	however it is not well adopted in the visual representation of biological data. Different applications 
                        	do create independent implementations of the same functionality to represent the same type of information. 
                        	An example is the representation of sequence information. UniProt, PRIDE, Ensembl, InterPro,Readseq, 
                        	Dasty and PDBe have different implementations to represent sequence information. The BioJS project 
                        	encourages to jointly develop graphical components that can be used to represent the same 
                        	functionality in different sites. As example, the BioJS sequence component was designed and 
                        	created looking at the requirements and functionality of the sequence visualization of UniProt, 
                        	PRIDE, Dasty and PDBe. This recommended practice is not always possible and it is not mandatory 
                        	for BioJS components.</p>
                        
                    </div>
                </div>
                   
            </div> 
        
        
<!-- ============================== footer ======================================= -->

            <footer>
                <div class="grid_24" id="global-footer">
                    <div class="grid_4 alpha">
                        <h3>EMBL-EBI</h3>
                        <ul>
                            <li class="first"><a href="/your-privacy" title="">Your privacy</a></li>
                            <li><a href="/cookies">Cookies</a></li>
                            <li><a href="/ethics">Ethics</a></li>
                            <li><a href="/terms-use-0">Terms of use</a></li>
                        </ul>
                    </div>
                    
                    <section id="global-nav-expanded">
                        <div class="grid_4">
                            <h3>Services</h3>
                            <ul>
                                <li class="first"><a href="/services" title="">Overview</a></li>
                            </ul>
                        </div>
                        
                        <div class="grid_4">
                            <h3>Research</h3>
                            <ul>
                                <li><a href="/research">Overview</a></li>
                                <li><a href="/research/groups">Research groups</a></li>
                                <li><a href="/research/publications">Publications</a></li> 
                            </ul>
                        </div>
                        
                        <div class="grid_4">
                            <h3>Industry</h3>
                            <ul>
                                <li class="first"><a href="/industry">Overview</a></li>
                                <li><a href="/industry/sme-forum"><abbr title="Small Medium Enterprise">SME</abbr> Forum</a></li>
                            </ul>
                        </div>
                        
                        
                        <div class="grid_4">
                            <h3>Training</h3>
                            <ul>
                                <li class="first"><a href="/training">Overview</a></li>
                                <li><a href="/training/events">Events</a></li>
                            </ul>
                        </div>
                        
                        
                        <div class="grid_4 omega">
                            <h3>About us</h3>
                            <ul>
                                <li class="first"><a href="/about-us">Overview</a></li>
                                <li><a href="/about-us/history">History</a></li>
                                <li><a href="/about-us/funding">Funding</a></li>
                                <li><a href="/about-us/staff-list">People</a></li>
                                <li><a href="/about-us/ebi-news" title="">News</a></li>
                                <li><a href="/about-us/jobs">Jobs</a></li>
                                <li><a href="/about-us/events">Events</a></li>
                                <li><a href="/about-us/publications">Publications</a></li>
                                <li><a href="/about-us/visit-us">Visit us</a></li>
                                <li class="last"><a href="/about-us/contact-us">Contact us</a></li>
                            </ul>
                        </div>
                    </section>
                    
                </div>
            
            </footer>
        </div> <!-- div class="container_24" id="wrapper" -->
    </body>
</html>
